<script setup lang="ts">
import { ref } from 'vue'
import TopTitle from "@/components/TopTitle.vue"
import axios from 'axios';
import router from '@/router';
// import { onMounted } from 'vue';
// import ref from 'vue';


const gettags = ref([])
const res = ref<any>([])
// const old = ref([])
/************************************************** */
// 获取换一换（兴趣）的数据
var config = {
    method: 'get',
    url: '/m1/story/getNovelTagList?type=%E6%82%AC%E7%96%91%E7%81%B5%E5%BC%82',
    headers: {
        'c': 'android/model:MuMu,SDK:Android6.0.1(API23)-huoxing/2.7.3/guanwang/000000000000000',
        'x-i': 'e7ed69f043e48c5dd069b7a86d2913261958caf972a4c177ebd2896c3640e90342bad2ef7a3d5c703175335411ff3291db5f3a818e6c8e86226faa198c7866de81ce843c1216e979ec3268d7d6c6a74a',
        'x-s': 'd16cd3d0c6789317525dc511eff4b94c',
        'x-ssid': '',
        'Accept': '*/*',
    }
};

axios(config)
    .then(function (response: any) {

        gettags.value = response.data.data
        // 一开始就调用点击事件去 渲染
        changeHandler(gettags.value)
    })
    .catch(function (error: any) {
        console.log(error);
    });

// 换一换
const changeHandler = (arr: any) => {
    res.value = []
    let selected: any = [];
    while (selected.length < 5) {
        let index = Math.floor(Math.random() * arr.length);
        for (var i = 0; i <= selected.length; i++) {
            if (i == selected.length) {
                selected.push(arr[index])
                break
            }
            else if (arr[index] == selected[i]) {
                break
            }
        }
    }
    res.value = selected
}


/************************************************** */

// 跳转到对应标签

// 获取ref的方法
// const tag = ref(null);
const jumpDetail = (e: any) => {
    console.log(e.target.innerText);
    router.push(`/detailtag?tags=${e.target.innerText}`)
}

/************************************************** */

// 跳转到对应类型详情
const jumpType = (e: any) => {
    let name = e.target.getAttribute('name')
    let title = e.target.getAttribute('title')
    let alt = e.target.getAttribute('alt')
    router.push(`/detailtype?name=${name}&title=${title}&alt=${alt}`)
}

/************************************************** */
// 搜索跳转


</script>

<template>
    <div class="bookstore">
        <TopTitle :flag="true" name="书库">
            <span class="iconfont icon-sousuo sousuo" @click="$router.push('/search')"></span>
        </TopTitle>
        <!-- 根据阅读兴趣推荐 -->
        <div class="recommend">
            <div class="interest">
                <p>根据阅读兴趣推荐</p>
                <p class="change" @click="changeHandler(gettags)">换一换<span class="iconfont icon-huanyihuan"></span></p>
            </div>
            <ul>
                <li v-for="item in res" @click="jumpDetail($event)">
                    {{ item.tagName }}
                </li>

            </ul>
        </div>

        <!-- 类型详情 -->
        <ul class="type" @click="jumpType($event)">
            <li>
                <img src="../assets/book-store/书库-悬疑.jpg" alt="悬疑灵异" name="悬疑" title="悬疑">
            </li>
            <li>
                <img src="../assets/book-store/书库-灵异.jpg" alt="悬疑灵异" name="精选" title="灵异">
            </li>
            <li>
                <img src="../assets/book-store/书库-都市.jpg" alt="现代都市" name="都市" title="都市">
            </li>
            <li>
                <img src="../assets/book-store/书库-玄幻.jpg" alt="玄幻仙侠" name="玄幻" title="玄幻">
            </li>
            <li>
                <img src="../assets/book-store/书库-其它.jpg" alt="历史军事" name="精选" title="其他">
            </li>
        </ul>

    </div>
</template>

<style scoped lang='less'>
@import "//at.alicdn.com/t/c/font_4308477_594m7jviupp.css";


.bookstore {
    height: 100%;
    overflow: scroll;
    background-color: #eee;
}

.sousuo {
    font-size: 26px;
}

.recommend {
    width: 100%;
    height: 30vw;
    background-color: #fff;
    margin-bottom: 10px;

    // 兴趣
    .interest {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 18px;
        color: #b7b3b6;

        p.change {
            color: #737378;

            span {
                margin: 0 5px;
            }
        }
    }

    // 标签
    ul {
        display: flex;

        li {
            padding: 5px 8px;
            border: 1px solid #eee;
            border-radius: 20px;
            margin: 10px 5px;
        }
    }

}

.type {
    padding: 10px;
    background-color: #fff;

    li {
        width: 95vw;
        margin: 0 auto;

        img {
            width: 100%;

        }
    }
}
</style>